import useLoading from '@/hooks/loading'
import {useTablePaging} from '@/hooks/tableHook'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {debounce} from '@/libs/debounce'

const DevTypeSelect = defineComponent({
  props: {
    devTypeId: Number,
    dropdownClassName: {
      type: String,
      default: 'selectDevType'
    }
  },
  emits: {
    'update:devTypeId': (devTypeId: number | undefined): boolean => true
  },
  setup(props, {emit}) {
    const {store} = useGlobalAPI()

    const {loading, startLoading, closeLoading} = useLoading()

    const {page, size, addPage, resetPagination, updatePagination} = useTablePaging()

    let devTypeId = ref<number | undefined>(undefined)

    let searchValue = ref<string | undefined>(undefined)

    const selectDevTypeList = computed(() =>
      (store.getters['device/devTypeList'] || []).map(item => ({
        label: item.devTypeName,
        value: item.devTypeId
      }))
    )

    watch(
      () => props.devTypeId,
      n => {
        devTypeId.value = n
      },
      {immediate: true}
    )

    watch(
      () => devTypeId.value,
      n => {
        emit('update:devTypeId', n)
      }
    )

    function updateSelectDevTypeList() {
      startLoading()
      store.dispatch('device/updateSelectDevTypeList', {
        page: page.value,
        size: size.value,
        devTypeName: searchValue.value,
        success: data => {
          updatePagination(data)
          closeLoading()
        },
        error: () => {
          closeLoading()
        }
      })
    }

    const handleSelectSearch = debounce((value: string) => {
      // 选择框选中后，会自动清空search输入的值
      // 从而调动此方法
      resetPagination()
      store.commit('device/clearDevTypeList')

      searchValue.value = value
      updateSelectDevTypeList()
    }, 300) as (val: string) => void

    function handleSelectContentScroll(e: Event & {target: HTMLElement}) {
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      let scrollTop = e.target.scrollTop
      if (clientHeight + scrollTop === scrollHeight) {
        addPage(() => {
          updateSelectDevTypeList()
        })
      }
    }

    onMounted(() => {
      if (!selectDevTypeList.value.length) {
        updateSelectDevTypeList()
      }
    })

    return () => (
      <a-select
        v-model={[devTypeId.value, 'value']}
        options={selectDevTypeList.value}
        dropdownClassName={props.dropdownClassName}
        allow-clear={true}
        show-search
        placeholder='选择设备型号'
        // filter-option={(
        //   input: string,
        //   option: {label: string; value: number}
        // ) => filterOption(input, option)}
        filter-option={false}
        suffixIcon={<i class='iconfont icon-shebeixinghao text-primary'></i>}
        not-found-content={loading.value ? <a-spin size='small' /> : null}
        onSearch={handleSelectSearch}
        onPopupScroll={handleSelectContentScroll}
      ></a-select>
    )
  }
})

export default DevTypeSelect
